<template>
    <div>
        <!--        1.返回与搜索-->
        <div>
            <van-row justify="space-between">
                <van-col span="">
                    <van-nav-bar
                            left-arrow
                            @click-left="tzback()"
                    />
                </van-col>
                <van-col span="">
                    <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
                </van-col>
                <van-col span="">
                    <van-grid clickable class="right">
                        <van-grid-item icon="location-o" text="地图" to="/" />
                    </van-grid>
                </van-col>
            </van-row>
        </div>
        <!--        3.下拉筛选菜单-->
        <div>
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
                <van-dropdown-item v-model="value3" :options="option3" />
                <van-dropdown-item v-model="value4" :options="option4" />
            </van-dropdown-menu>
        </div>
        <!--        4.list列表【ktv各类门店】-->
        <div>
                <van-card v-for="f in flower"
                          :num="f.meter+m4"
                          :price="m2+f.price"
                          :desc="f.des+m1"
                          :title="f.name"
                          :thumb="f.imgurl"
                          :origin-price="f.adress"
                          @click="tzdetail()"
                />
        </div>
        <div>{{m}}</div>
    </div>

</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "Flower",
        data(){
            return{
                flower:[],
                m1:"条",
                m2:"消费：",
                m4:"米",

            }
        },
        mounted(){
            //请求接口，实现查询
            this.axios.get("/api/flower/query.do").then(res=>{
                if(res.data.code==200){
                    this.flower=res.data.data;
                }
            })
        },
        methods: {
            tzback() {
                history.back();
            },
            tzdetail(){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push("/flowerdetail");
            }
        },
        setup() {
            const value1 = ref(0);
            const value2 = ref('a');
            const value3 = ref('a');
            const value4 = ref('a');
            const option1 = [
                { text: '附近', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ];
            const option2 = [
                { text: '花店', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ];
            const option3 = [
                { text: '智能排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ];
            const option4 = [
                { text: '筛选', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ];

            return {
                value1,
                value2,
                value3,
                value4,
                option1,
                option2,
                option3,
                option4,
            };
        },
    }
</script>

<style scoped>
.right{
    height: 30px;
}
</style>